<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <link rel="stylesheet" href="icon.css">
    <title>千图网</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1200px;
            margin: 0 auto;
        }
        header{
            width: 100%;
            height: 50px;
            background-color: #10c55b;
        }
        ul{
            margin: 0;
            padding: 0;
            float: left;
        }
        li{
            list-style: none;
            float: left;
        }
        header a{
            color: #afffd0;
            line-height: 48px;
            text-decoration: none;
            font-size: 18px;
            margin: 0 15px;
        }
        header li:hover{
            background-color: #01ac48;
            color: white;
        }
        .head-left{
            width: 500px;
            height: 50px;
            float: left;
        }
        .head-right{
            width: 400px;
            height: 50px;
            float: right;
            line-height: 50px;
        }
        .head-right input{
            width: 80px;
            height: 35px;
            background-color: #10c55b;
            border-radius: 5px;
            border: none;
            color: gray; 
        }
        .search-1{
            width: 100%;
            height: 125px;
            padding: 10px;
        }
        
        .logo{
            width: 200px;
            height: 80px;
            float: left;
        }
        .searof{
            width: 730px;
            height: 100px;
            float: left;
        }
        .searof p{
            float: left;
            margin: 0;
            padding: 0;
        }
        .searof p a{
            text-decoration: none;
            color: gray;
            margin: 5px;
        }
        .searof a:hover{
            color: #15df68;
        }
        .sear{
            width: 700px;
            height: 50px;
            border: 1px solid #10c55b;
            border-radius: 5px;
            
            margin: 10px ;
        }
        .sear input{
            width: 520px;
            height: 30px;
            margin: 10px 0;
            border-top: none;
            border-bottom: none;
            border-right: none;
        }
        .sear button{
            width: 118px;
            height: 48px;
            background-color: #15df68;
            border: none;  
            opacity: 0.9; 
        }
        .search-2{
            width: 100%;
            height: 100px;
            background-color: white;
            position: fixed;
            top: 0;
            z-index: 1000;
            display: none;
        }
        .search-2-right{
            width: 260px;
            height: 120px;
            float: left;
        }
        .search-2-right a {
            color: gray;
            line-height: 60px;
            text-decoration: none;
            font-size: 18px;
            margin: 0 15px;
        }
        .search-2-right a:hover{
            color: #15df68;
        }
        
        .search-2-right input{
            width: 70px;
            height: 30px;
            margin-top: 15px;
            border-radius: 5px;
            border: none;
            background-color: lightgreen;
        }
         span{
            margin: 0;
            padding: 0;
            line-height: 45px;
            font-size: 20px;
        } 
        .roll{
            width: 100%;
            height: 320px;
            background-color: black;
        }
        .box{
            width: 100vw;
            height: 320px;
            position: relative;
        }
        .img-list li{
            position: absolute; 
            top: 0;
            left: 0;
            display: none;
        }
        .img-list li.current{
            display: block;
        }
        .indicator{
            width: 1200px;;
            position: absolute;
            left: 0;
            bottom: 20px;
            display: flex;
            justify-content: center;
            color: white;
        }
        .indicator li{
            width: 15px;
            height: 15px;
            border-radius: 50%; 
            background-color: #aaa;
            text-align: center;
            line-height: 15px;
            margin: 0 5px;
        }
        .indicator li.active{
            background-color: #10c55b;
        }
        .img-click{
            width: 1200px;
            height: 100px;
        }
        .img-click span{
            width: 60px;
            height: 80px;
            line-height: 80px;
            font-size: 60px;
            text-align: center;
            color: white;
            position: absolute;
            background-color: rgba(0,0,0,0.1);
            top:120px;
            display: none;  
        }
        .img-click span:hover{
            background-color: orangered;
            opacity: 0.8;
            cursor: pointer; 
        }
        .img-click .prev{
             left:0; 
        }
        .img-click .next{
             left:1150px; 
        }
        .choice{
            width: 1200px;
            height: 250px;
            margin-top: 30px;
            color: grey; 
            position: relative;
        }
        .choice p{
            padding: 0;
            margin: 0;
            font-size: 25px;
        }
        .choice a{
            color: grey;
            font-size: 15px;
            text-decoration: none;
            line-height: 30px;
        }
        .choice a:hover{
            color: orange;
        }
        .choice-top{
            width: 1200px;
            height: 40px;
           
        }
        .choice img {
            width: 280px;
            height: 200px;
            margin: 10px;
        }
        .choice-dis{
            width: 280px;
            height: 200px;
            margin-left: 10px; 
            background-color: black;
            opacity: 0.5;
            left: 0px; 
            margin-top: 50px;
            position: absolute;  
            z-index: 999;
            display: none; 
            transition-delay: 0.1s;
        }
        .choice-dis p{
            width: 200px;
            height: 100px;
            border: 3px solid white;
            border-left: none;
            border-right: none;
            position: absolute; 
            color: white;
            font-size: 30px;
            left: 40px;
            bottom: 0px; 
            transition: all 0.1s linear;
        }
        .poster{
            width: 1200px;
            height: 460px;
            color: grey;
            position: relative;
            margin-top: 30px;
        }
        .poster p{
            padding: 0;
            margin: 0;
            font-size: 25px;
        }
        .poster-top a{
            color: grey;
            font-size: 15px;
            text-decoration: none;
            line-height: 30px;
            margin: 0 10px;
        }
        .poster a:hover{
            color: orange;
        }
        .poster-top{
            width: 1200px;
            height: 40px;
        }
        .poster img {
            width: 300px;
            height: 390px;
            padding: 0 10px;
        }
        .poster-dis{
            width: 280px;
            height: 390px;
            margin-left: 10px; 
            background-color: black;
            opacity: 0.8;
            left: 0px; 
            margin-top: 40px;
            position: absolute;  
            z-index: 999;
            display: none; 
            transition-delay: 0.1s;
        }
        .poster-dis p{
            position: absolute; 
            color: white;
            font-size: 30px;
            left: 80px;
            top: 0px; 
            transition: all 0.1s linear;
        }
        .aaa{
            width: 100%;
            height: 500px;
            opacity: 0.5;
            background-color: #dcdcdc;
        }
        footer{
            width: 100%;
            height: 350px;
            color: gray;
            margin-top: 20px;
        }
        .foot-top-left{
            width: 800px;
            height: 270px;
            float: left;
        }
        .foot-top-left li{
            margin-right: 100px;
        }
        .foot-top-left a{
            text-decoration: none;
            font-size: 13px;
            color: gray;
        }
        .foot-top-left a:hover{
            color: #10c55b;
        }
        .foot-top-right{
            width: 380px;
            height: 270px;
            float: left;
        }
        h2{
            margin: 0;
            padding: 20px 0;
        }
        .foot-top-right a{
            text-decoration: none;
            color: white;
            font-size: 16px;
        }
        .foot-top-right button{
            width: 120px;
            height: 40px;
            border-radius: 5px;
            border: none;
            background-color: #01ac48;
        }
        .foot-top-right button:hover{
            background-color: #10c55b;
        }
        hr{
            opacity: 0.3;
        }
        .foot-f{
            width: 1200px;
            height: 70px;
        }
        .foot-f img{
            width: 35px;
            height: 35px;
        }
        .foot-f a{
            text-decoration: none;
            color: gray;
            padding: 0 20px;
            line-height: 40px;
        }
        span{
            float: right;
            font-size: 15px;
        }
        .clearfix::after{
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <div class="head-left clearfix">
                <ul>
                    <li style="background-color:#01ac48"><a href="#">首页</a></li>
                    <li><a href="#">所有分类∨</a></li>
                    <li><a href="#">设计创意</a></li>
                    <li><a href="#">办公创意</a></li>
                </ul>
            </div>
            
            <div class="head-right clearfix">
                <li><a href=""><span class="icon r1" style="float: left"></span>VIP中心</a></li>
                <input type="button"value="请登录" style="background-color:#696969; opacity:0.7; 
                color:white">
                <input type="button" value="免费注册">
            </div>
            
        </div>
    </header>

    <main>
        <div class="search-1">
            <div class="container">
                <div class="logo">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="searof">
                    <ul class="sear">
                        <li><span>&#x3000;全站&#x3000;</span></li>
                        <li><input type="text" placeholder="&#x3000;800万免费素材下载"></li>
                        <li><button><span class="icon r2" style="margin-right:30px"></span></button></li>
                    </ul>
                    <p>热门搜索：</p>
                    <p><a href="#" style="color:#15df68">七夕</a></p>
                    <p><a href="#">详情页</a></p>
                    <p><a href="#" style="color:#15df68">icon</a></p>
                    <p><a href="#">主图</a></p>
                    <p><a href="#" style="color:#15df68">秋季</a></p>
                    <p><a href="#" style="color:#15df68">PPT模板</a></p>
                    <p><a href="#">EXCEL模板</a></p>
                    <p><a href="#">首页</a></p>
                    <p><a href="#">个人简历</a></p>
                    <p><a href="#" style="color:#15df68">装饰画</a></p>
                </div>
            </div>
        </div>
         <div class="search-2">
            <div class="container"> 
                <div class="logo">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="searof">
                    <ul class="sear">
                        <li><span>&#x3000;全站&#x3000;</span></li>
                        <li><input type="text" placeholder="&#x3000;800万免费素材下载"></li>
                        <li><button><span class="icon r2" style="margin-right:30px"></span></button></li>
                    </ul>
                </div>
                <div class="search-2-right clearfix">
                    <li><a href="">VIP中心</a></li>
                    <input type="button"value="请登录">
                    <input type="button" value="免费注册">
                </div>
            </div> 
        </div> 
        <div class="roll">
            <div class="container">
                <div class="box">
                    <ul class="img-list">
                        <li class="current"><a href="#"><img src="./img/banner01.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/banner02.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/banner03.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/banner04.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/banner05.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/banner06.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/banner07.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./img/banner08.jpg" alt=""></a></li>
                    </ul>
                    <ul class="indicator">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                  <div class="img-click">
                    <span class="prev">&lt;</span>
                    <span class="next">&gt;</span>
                </div>  
                </div>
            </div>
        </div>
        <div class="container choice">
            <div class="choice-dis">  
                <p></p>
            </div>
            <div class="choice-top clearfix">
                <li><p><span class="icon-choice r7"></span>精选专题&#x3000;</p></li>
                <li><a href="">100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</a></li>
            </div>
             <div class="choice-img clearfix">
                <ul>
                    <li><a href="#"><img src="./img/jxzt01.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/jxzt02.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/jxzt03.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/jxzt04.jpg" alt=""></a></li>
                </ul>
            </div> 
        </div>
        <div class="container poster">
            <div class="poster-dis">
                <p><span class="icon-d r3" style="margin-left: 60px;"></span>
                <span class="icon-d r6"></span></p>
            </div>
            <div class="poster-top clearfix">
                <li><p><span class="icon-choice r8"></span>商用海报&#x3000;</p></li>
                <li><a href="">招聘海报</a></li>
                <li><a href="">配图海报</a></li>
                <li><a href="">企业文化</a></li>
                <li><a href="">促销海报</a></li>
                <li><a href="">原创插画</a></li>
            </div>
             <div class="poster-img clearfix">
                <ul>
                    <li><span class="icon-img r4"></span><a href="#"><img src="./img/syhb01.jpg" alt=""></a></li>
                    <li><span class="icon-img r4"></span><a href="#"><a href="#"><img src="./img/syhb02.jpg" alt=""></a></li>
                    <li><span class="icon-img r4"></span><a href="#"><a href="#"><img src="./img/syhb03.jpg" alt=""></a></li>
                    <li><span class="icon-img r4"></span><a href="#"><a href="#"><img src="./img/syhb04.jpg" alt=""></a></li>
                </ul>
            </div> 
        </div>
        <div class="aaa"></div>
    </main>
    <footer>
        <div class=" container foot-top clearfix">
            <div class="foot-top-left clearfix">
                <ul>
                    <li><strong>常见问题</strong>
                        <p><a href="">成为特邀设计师</a></p>
                        <p><a href="">成为原创贡献者</a></p>
                        <p><a href="">注册登录</a></p>
                        <p><a href="">账号/密码</a></p>
                        <p><a href="">充值售后</a></p>
                        <p><a href="">版权投诉</a></p>
                    </li>
                    <li><strong>关于千图网</strong>
                        <p><a href="">关于我们</a></p>
                        <p><a href="">媒体报道</a></p>
                        <p><a href="">加入我们</a></p>
                        <p><a href="">心系千图</a></p>
                        <p><a href="">每日最新</a></p>
                    </li>
                    <li><strong>产品服务</strong>
                        <p><a href="">官方博客</a></p>
                        <p><a href="">帮助中心</a></p>
                        <p><a href="">千图导航</a></p>
                    </li>
                    <li><strong>友情链接</strong>
                        <p><a href="">我图网</a></p>
                        <p><a href="">千库网</a></p>
                        <p><a href="">摄图网</a></p>
                        <p><a href="">包图网</a></p>
                        <p><a href="">视达网</a></p>
                        <p><a href="">更多&#x3000;>>></a></p>
                    </li>
                </ul>
            </div>
            <div class="foot-top-right clearfix">
                <h2>客服咨询</h2>
                <p><strong>电话:</strong> 400-998-7011 （9:00-18:00）</p>
                <p><strong>E-mail:</strong> feedback@58pic.com</p>
                <button><span class="icon-qq r5" style="float:left"></span><a href="">点我交谈</a></button>
            </div>  
        </div>
        <div class="container foot-f">
            <hr>
            <ul>
                <li><img src="./img/qq.png" alt=""></li>
                <li><img src="./img/ww.png"</li>
                <li><a href="">招聘海报</a></li>
                <li><a href="">配图海报</a></li>
                <li><a href="">企业文化</a></li>
            </ul>
            <span>Copyright ©2013-2017 千图网 沪ICP备10011451号-6上海工商 安全实名验证 信用网站</span>
        </div>
    </footer>
</body>

</html>
<script>
    window.onload = function(){
        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var roll = document.querySelector('.roll');
        var choicedis =document.querySelector('.choice-dis');
        var choiceimg =document.querySelector('.choice-img').querySelectorAll('li');
        var choicedisp =document.querySelector('.choice-dis').querySelector('p');
        var posterdis =document.querySelector('.poster-dis');
        var posterimg =document.querySelector('.poster-img').querySelectorAll('li');
        var posterdisp =document.querySelector('.poster-dis').querySelector('p');

        var color = ['black','#ffff0f','#fdf100','#2d9aff','#89dce3','#fef8c3','#110204','#f4cad8'];
        var index=0;
        function prevImg(){
            index = index == 0 ? imgLis.length - 1 : index - 1;
            showImg();
        }
        function nextImg(){
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        function showImg(){
            for(var i = 0; i < imgLis.length;i ++){
                imgLis[i].className = '';
                indicatorLis[i].className = '';
                roll.style.backgroundColor = '';
            }
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'active';
            roll.style.backgroundColor = color[index];
        }
        var timer = setInterval(nextImg,2000);
        for(var i = 0;i < indicatorLis.length;i++){
            indicatorLis[i].index = i;
            indicatorLis[i].onmouseover = function(){
                clearInterval(timer);
                index = this.index;
                showImg();
            }
            indicatorLis[i].onmouseout = function(){
                if (timer != null) {
                    return;
                }
                timer = setInterval(nextImg,2000);
            }
        }
        box.onmouseover = function(){
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        box.onmouseout = function(){
            if(timer)return;
            timer = setInterval(nextImg,2000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        prev.onclick = function(){
            prevImg();
        }
        next.onclick = function(){
            nextImg();
        }
        var mes1=['&#x3000;和花有关','&#x3000;爱的元素','&#x3000;鲜花背景','&#x3000;枫叶背景'];
        for(var i = 0; i<choiceimg.length;i++){
            choiceimg[i].index=i;
            choiceimg[i].onmouseover = function(){
                choicedis.style.display='block';
                choicedisp.innerHTML=mes1[this.index];
                choicedis.style.left=this.index*300+'px';
                choicedisp.style.bottom = '0px'; 
                choicedis.onmouseover=function(){
                    choicedis.style.display='block';
                    // choicedis.style.left=this.index*300+'px'; 
                    choicedisp.style.bottom = '50px';
                }
            }
            choiceimg[i].onmouseout = function(){
                choicedis.style.left=this.index*300+'px';
                choicedis.style.display='none';
                choicedisp.style.bottom = '0px';
            }
            posterimg[i].index=i;
            posterimg[i].onmouseover = function(){
                posterdis.style.display='block';
                posterdis.style.left=this.index*300+'px';
                posterdisp.style.top = '0px'; 
                posterdis.onmouseover=function(){
                    posterdis.style.display='block';
                    // posterdis.style.left=this.index*300+'px'; 
                    posterdisp.style.top = '50px';
                }
            }
            posterimg[i].onmouseout = function(){
                posterdis.style.left=this.index*300+'px';
                posterdis.style.display='none';
                posterdisp.style.top = '0px';
            }
        }
    }
    var search2 = document.querySelector('.search-2');
     window.onscroll = function(){
        var scrollTop = document.body.scrollTop || document.scrollingElement.scrollTop;
        // console.log(scrollTop);
        if(scrollTop >= 130){
            search2.style.display='block';
            search2.style.top = 0;
        }else{
            search2.style.display='none';
        }
    }
</script>